<template>
  <div class="wrapper" v-if="detail[0]">
    <div class='top'>
      <h3>{{ orderStatus.title }}</h3>
      <h5>订单金额(含运费): ￥{{ detail[0] && detail[0].subtotal }}</h5>
      <h5 v-if="orderStatus.status != 4">
        <Timeout :time="orderStatus.time" :desc="orderStatus.desc"></Timeout>
      </h5>
    </div>
    <Logistics v-if="logis" :logis="logis" />
    <OrderAddress
      :name="detail[0].addressname"
      :mobile="detail[0].mobile"
      :province="detail[0].province"
      :city="detail[0].city"
      :district="detail[0].district"
      :address="detail[0].address"
    />
    <div class="goods-list">
      <p class="title">有惊喜</p>
      <GoodsItem
        v-for="item of detail"
        :title="item.name"
        :price="item.total"
        :count="Number(item.order_num)"
        :img="item.url"
        :key="item.index"
      >
        <span class="desc color-red" v-if="item.shipping_status == 5">
          退货中...
        </span>
        <span class="desc color-red" v-if="item.shipping_status == 7">
          已退货
        </span>
      </GoodsItem>
    </div>
    <div class="mid">
      <MsgItem title="商品小计" :value="'￥' + detail[0].subtotal"></MsgItem>
      <MsgItem title="运费" value="￥0.00"></MsgItem>
      <MsgItem title="实付费(含运费)" :value="'￥' + detail[0].subtotal" :highLight="true"></MsgItem>
      <MsgItem title="买家备注" :value="detail[0].remark || '无'"></MsgItem>
    </div>
    <div class="bottom">
      <p>订单编号：{{ detail[0].order_code }}</p>
      <p>创建时间：{{ detail[0].create_at }}</p>
      <p>支付时间：{{ detail[0].create_at }}</p>
    </div>
    <template v-if="detail[0].payment_status == 2 && detail[0].shipping_status == 2">
      <div class="form">
        <div class="item">
          <span>选择快递公司</span>
          <select name="" id="" v-model="com">
            <option value="">请选择</option>
            <option value="yunda">韵达快递</option>
            <option value="youzhengguonei">邮政快递包裹</option>
            <option value="zhongtong">中通快递</option>
            <option value="yuantong">圆通速递</option>
            <option value="shunfeng">顺丰速运</option>
            <option value="huitongkuaidi">百世快递</option>
            <option value="shentong">申通快递</option>
            <option value="jd">京东物流</option>
            <option value="ems">EMS</option>
            <option value="tiantian">天天快递</option>
            <option value="debangwuliu">德邦</option>
            <option value="zhaijisong">宅急送</option>
            <option value="youshuwuliu">优速快递</option>
            <option value="debangkuaidi">德邦快递</option>
            <option value="baishiwuliu">百世快运</option>
            <option value="pjbest">品骏快递</option>
            <option value="transrush">TransRush</option>
            <option value="dhl">DHL-中国件</option>
            <option value="zhongtongkuaiyun">中通快运</option>
            <option value="annengwuliu">安能快运</option>
            <option value="suer">速尔快递</option>
            <option value="suning">苏宁物流</option>
            <option value="yundakuaiyun">韵达快运</option>
            <option value="adapost">安达速递</option>
          </select>
        </div>
        <div class="item">
          <span>快递单号</span>
          <input type="text" v-model="num" placeholder="请输入快递单号">
        </div>
      </div>
      <button class="submit" @click="submit">发货</button>
    </template>
  </div>
</template>

<script>
  import GoodsItem from '@/components/goodsItem/GoodsItem.vue'
  import MsgItem from '@/components/msgItem/MsgItem.vue'
  import Timeout from '@/components/timeout/Timeout.vue'
  import Logistics from '@/components/logistics/Logistics.vue'
  import OrderAddress from '@/components/orderAddress/OrderAddress.vue'
  import { mapState } from 'vuex'
  import _ from 'lodash'
  export default {
    name: 'MerchantOrderDetail',
    components: {
      GoodsItem,
      MsgItem,
      Timeout,
      Logistics,
      OrderAddress
    },
    created() {
      this._get()
    },
    data() {
      return {
        show: false,
        detail: [],
        logis: '',
        com: '',
        num: ''
      }
    },
    computed: {
      ...mapState(['openId']),
      orderStatus() {
        let status = ''
        let title = ''
        let desc = ''
        let time = ''
        this.detail.forEach(item => {
          if(item.payment_status == 1) {
            status = 1
            title = '买家未付款'
            desc = '后不付款订单自动取消'
            time = this.detail[0].payment_endtime
            return
          }
          if(item.payment_status == 2) {
            if(item.shipping_status == 2) {
              status = 2
              title = '卖家已付款，请尽快发货'
              desc = '后不发货,会将此订单安排给其他加盟商'
              time = this.detail[0].not_endtime
              return
            }
            if(item.shipping_status == 6) {
              status = 2
              title = '已发货'
              desc = '后买家自动确认收货'
              time = this.detail[0].confirm_endtime
              return
            }
          }
        })
        return { status, title, desc, time }
      }
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/details',
          method: 'GET',
          params: {
            order_code: this.$route.params.id,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.detail = data
          if(this.detail[0].shipping_status != '2') {
            this.getLogistics(this.detail[0].com, this.detail[0].num)
          }
        }
      },
      async getLogistics(com, num) {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/platform/expre',
          method: 'GET',
          params: {
            com,
            num
          }
        })
        if(code === 0) {
          if (Array.isArray(data)) {
            let logisArr = data[0].data.map(item => {
              item.day = item.time.substring(5, 10)
              item.time = item.time.substring(11, 16)
              return item
            })
            this.logis = {
              com: data[0].com,
              num: data[0].nu,
              logisArr
            }
          } else {
            this.logis = data
          }
        }
      },
      submit() {
        if(!this.com) {
          this.$toast('请选择快递公司')
          return
        }
        if(!this.num) {
          this.$toast('请输入快递单号')
          return
        }
        this._submit()
      },
      _submit: _.throttle(async function() {
        let { data: { code } } = await this.$axios({
          url: '/v1/merchant/increase',
          method: 'POST',
          data: {
            order_code: this.$route.params.id,
            com: this.com,
            num: this.num,
            openid: this.openId
          }
        })
        if(code == 0) {
          this._get()
        }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .slide-enter-active, .slide-leave-active {
    transition:  all 0.2s linear;
  }
  .wrapper {
    padding-bottom: 50px;
    min-height: 100vh;
    background: #eee;
  }
  .top {
    text-align: center;
    margin-bottom: 0.2rem;
    padding: 0.6rem 0;
    background: orange;
    color: #fff;
    h3 {
      font-size: 0.32rem;
    }
    h5 {
      font-size: 0.28rem;
    }
  }
  .logistics-msg {
    position: relative;
    padding: 0.2rem;
    background: #fff;
    margin-bottom: 0.2rem;
    p {
      margin-bottom: 0.1rem;
      font-size: 0.24rem;
    }
    span {
      font-size: 0.2rem;
      color: $colorGray;
    }
    h3 {
      position: absolute;
      right: 0.2rem;
      bottom: 0.2rem;
      font-size: 0.2rem;
      color: $colorGray;
    }
  }
  .goods-list {
    padding: 0 0.2rem;
    background: #FFF;
    .title {
      padding: 0.1rem 0;
      font-size: 0.24rem;
      border-bottom: 1px solid $bgGray;
    }
  }
  .mid {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    background: #fff;
  }
  .bottom {
    margin-top: 0.2rem;
    padding: 0.2rem;
    background:#fff;
    p {
      margin-bottom: 0.1rem;
      font-size: 0.24rem;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .bar {
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.2rem;
    text-align: right;
    .back {
      padding: 0.1rem;
      border: 1px solid $colorGray;
      background: $bgGray;
      border-radius: 20px;
    }
  }
  .form {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
  }
  .item {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid $bgGray;
    span {
      display: block;
      flex: 0 0 1.6rem;
      width: 1.6rem;
      margin-right: 0.4rem;
    }
    input {
      flex: 1;
      display: block;
      font-size: 0.24rem;
    }
    select {
      flex: 1;
      display: block;
      font-size: 0.24rem;
      padding: 0;
      background: #fff;
    }
  }
  .submit {
    display: block;
    margin: 0.4rem auto;
    padding: 0.2rem;
    width: 80%;
    border-radius: 5px;
    border: none;
    color: #fff;
    background: $colorRed;
    font-size: 0.28rem;
  }
</style>
